<template>
  <div>
    <div class="header">
      <div class="flex items-center cursor-pointer" @click="back()">
        <svg-icon
          style="color: white; font-size: 24px; margin-right: 20px"
          icon-class="ArrowLeftBold"
        />
        <span class="text-white text-xl">{{$t('common.back')}}</span>
      </div>
    </div>
    <el-card class="card">
      <div class="title">{{ $t('modules.pass.member_info') }}</div>
      <div style="padding: 70px 200px 70px 70px; display: flex; justify-content: space-between">
        <div>
          <!-- Info 1 -->
          <div>
            <p class="secondTitle">{{ $t('common.basic_info') }}</p>
            <div class="my-4">
              <p class="label">{{ $t('modules.pass.member_no') }}</p>
              <p class="content">{{ detail.memberNo }}{{ detail.memberNo ? '' : '-' }}</p>
            </div>
            <div class="flex">
              <div class="my-4 w-64">
                <p class="label">{{ $t('modules.pass.integral') }}</p>
                <p class="content">{{ detail.memberPoints }}{{ detail.memberPoints!=='' ? '' : '-' }}</p>
              </div>
              <div class="my-4 w-64">
                <p class="label">{{ $t('operator.lever') }}</p>
                <p class="content">
                  {{ detail.memberLevelName }}{{ detail.memberLevelName ? '' : '-' }}
                </p>
              </div>
              <div class="my-4 w-64">
                <p class="label">{{ $t('common.status') }}</p>
                <p class="content">
                  <el-tag
                    size="small"
                    :type="detail.status === 0 ? 'info' : detail.status === 1 ? 'success' : 'error'"
                  >
                    {{
                      detail.status === 0
                        ? $t('modules.pass.not_add')
                        : detail.status === 1
                          ? $t('modules.pass.add')
                          : $t('modules.pass.remove')
                    }}
                  </el-tag>
                </p>
              </div>
            </div>
          </div>
          <!-- Info 2 -->
          <div class="mt-20">
            <p class="secondTitle">{{ $t('modules.pass.mrch_info') }}</p>
            <div class="my-4">
              <p class="label">{{ $t('appstore.application.mrchName') }}</p>
              <p class="content">{{ detail.mrchName }}{{ detail.mrchName ? '' : '-' }}</p>
            </div>
            <div class="flex">
              <div class="my-4 w-64">
                <p class="label">{{ $t('appstore.application.devSn') }}</p>
                <p class="content">{{ detail.devSn }}{{ detail.devSn ? '' : '-' }}</p>
              </div>
              <div class="my-4 w-64">
                <p class="label">{{ $t('common.email') }}</p>
                <p class="content">{{ detail.email }}{{ detail.email ? '' : '-' }}</p>
              </div>
              <div class="my-4 w-64">
                <p class="label">{{ $t('modules.pass.mobile') }}</p>
                <p class="content">{{ detail.mobile }}{{ detail.mobile ? '' : '-' }}</p>
              </div>
            </div>
          </div>
          <!-- Info 3 -->
          <div class="mt-20">
            <p class="secondTitle">{{ $t('modules.pass.other_info') }}</p>
            <div class="flex">
              <div class="my-4 w-64">
                <p class="label">{{ $t('common.create_time') }}</p>
                <p class="content" :title="timeFilter(detail.creTime)">
                  {{ dateFilter(detail.creTime) }} {{ detail.creTime ? '' : '-' }}
                </p>
              </div>
              <div class="my-4 w-64">
                <p class="label">{{ $t('modules.pass.receive_time') }}</p>
                <p class="content" :title="timeFilter(detail.receiveTime)">
                  {{ dateFilter(detail.receiveTime) }} {{ detail.receiveTime ? '' : '-' }}
                </p>
              </div>
              <div class="my-4 w-64">
                <p class="label">{{ $t('common.updateTime') }}</p>
                <p class="content" :title="timeFilter(detail.updTime)">
                  {{ dateFilter(detail.updTime) }} {{ detail.updTime ? '' : '-' }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="pass-card front" :style="{ backgroundColor: templateInfo.backgroundColor }">
          <div class="pass-card-header">
            <div class="logo">
              <img
                :src="baseurl + '/tempres/' + templateInfo.logoUrl"
                alt=""
              />
              <span class="logo-text">{{ templateInfo.logoText }}</span>
            </div>
            <div class="drag-item">
              <span class="label" :style="{ color: templateInfo.labelColor }">{{
                headerFields.label
              }}</span>
              <span class="skeleton" :style="{ color: templateInfo.textColor }">{{
                headerFields.value
              }}</span>
            </div>
          </div>
          <div class="pass-card-image">
            <img
              :src="baseurl + '/tempres/' + templateInfo.stripUrl"
              alt=""
            />
          </div>

          <div class="pass-card-body flex justify-between">
            <div class="drag-item" v-for="item in secondaryFields" :key="item.key">
              <span class="label" :style="{ color: templateInfo.labelColor }">{{
                item.label
              }}</span>
              <span class="skeleton" :style="{ color: templateInfo.textColor }">{{
                item.value
              }}</span>
            </div>
          </div>

          <!-- 二维码 -->
          <div class="text-center mt-12" v-if="codeDetail.altText!==''">
            <div class="bar-code">
              <img :src="qrUrl" class="mb-2" width="100px" />
              <p class="text-xs">{{ codeDetail.altText }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="title">Discount Coupon</div>
      <el-table v-loading="dataListLoading" :data="dataList" stripe class="passTable">
      <el-table-column key="ticketName" prop="ticketName" :label="$t('modules.pass.ticket_name')" />
      <el-table-column key="ticketType" prop="ticketType" :label="$t('modules.pass.ticket_type')" />
      <el-table-column key="drawTime" prop="drawTime" :label="$t('modules.pass.draw_time')">
        <template v-slot="scope">
          <div :title="timeFilter(scope.row.drawTime)">
            {{ dateFilter(scope.row.drawTime) }}
            {{ scope.row.drawTime ? '' : '-' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        key="expireTime"
        prop="expireTime"
        :label="$t('modules.pass.expire_time')"
      >
        <template v-slot="scope">
          <div :title="timeFilter(scope.row.expireTime)">
            {{ dateFilter(scope.row.expireTime) }}
            {{ scope.row.expireTime ? '' : '-' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column width="75px">
        <template v-slot="scope">
          <el-dropdown class="align-middle" trigger="click">
            <el-button text class="w-8">
              <svg-icon icon-class="MoreFilled" />
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="detailHandle(scope.row)" v-if="isAuth('10400202.MANAGE')">
                  <svg-icon icon-class="outlined-reload" />
                  {{ $t('common.detail') }}
                </el-dropdown-item>
                <el-dropdown-item @click="detailHandle(scope.row)" v-if="isAuth('10400202.MANAGE')">
                  <svg-icon icon-class="outlined-mail" />
                  {{ $t('common.detail') }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table> -->
    </el-card>
  </div>
</template>
<script>
import { Container, Draggable } from 'vue3-smooth-dnd'
import { isAuth } from '@/utils'
import { timeFilter, dateFilter } from '@/filters/index'
import { getPassDetail } from '@/api/pass-center'
const formatMapping = {
  PKBarcodeFormatQR: 'qrcode',
  PKBarcodeFormatPDF417: 'pdf417',
  PKBarcodeFormatAztec: 'azteccode',
  PKBarcodeFormatCode128: 'code128'
}

export default {
  components: {},
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataList: [],
      detail: {},
      templateInfo: {},
      headerFields: {},
      codeDetail: {},
      secondaryFields: [],
      codeType: 'pdf417',
      codeMessage: '123',
      baseurl:''
    }
  },
  computed: {
    qrUrl() {
      return `http://bwipjs-api.metafloor.com/?bcid=${this.codeType}&text=${this.codeMessage}`
    }
  },
  mounted() {
    this.baseurl = import.meta.env.VITE_APP_PROXY
    this.getDetail()
  },
  methods: {
    isAuth,
    timeFilter,
    dateFilter,
    back() {
      this.$router.back()
    },
    getDetail() {
      getPassDetail(this.$route.query.id)
        .then((res) => {
          this.detail = res
          this.templateInfo = res.templateInfo
          if (res.templateInfo.headerFields.length !== 0) {
            this.headerFields = res.templateInfo.headerFields[0]
          }
          if (res.templateInfo.secondaryFields.length !== 0) {
            this.secondaryFields = res.templateInfo.secondaryFields
          }
          if (res.templateInfo.barcodes.length !== 0) {
            this.codeDetail = res.templateInfo.barcodes[0]
            this.codeMessage = res.templateInfo.barcodes[0].message
            this.codeType = formatMapping[this.codeDetail.format] || ''
          }
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  background-image: url('../../pass-center/design/assets/pass-design-header-bg.jpg');
  height: 250px;
  padding: 40px 20px;
  background-repeat: no-repeat;
  background-size: cover;
}
:deep(.el-card) {
  --el-card-padding: 0;
}
.card {
  position: relative;
  margin: 0px 20px;
  transform: translateY(-150px);
}
.title {
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
  padding: 16px 24px;
  border-bottom: 1px solid #edf2f9;
}
.secondTitle {
  font-weight: 600;
  font-size: 18px;
  line-height: 36px;
}
.label {
  font-weight: 500;
  font-size: 12px;
  color: #797979;
  margin-bottom: 12px;
}
.content {
  font-weight: 500;
  font-size: 14px;
}

.pass-design-center {
  padding: 24px;
  flex-basis: 50%;
}

.pass-card {
  width: 330px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  padding-top: 8px;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  border-radius: 10px;
  &.saving {
    box-shadow: none;
    border: 0;
    border-radius: 0;
    .drag-container {
      border: 0;
    }
  }
  &.front {
    height: 470px;
  }
  .pass-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo {
      display: flex;
      align-items: center;
      .logo-text {
        cursor: pointer;
        margin-left: 8px;
        color: #ffffff;
        width: 80px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    .logo img {
      width: 32px;
      height: 32px;
    }
    height: 60px;

    .drag-item {
      width: 110px;
      display: flex;
      flex-direction: column;
      text-align: right;
      .label {
        width: 100%;
        margin-bottom: 0px;
        font-weight: 600;
      }
      .skeleton {
        width: 100%;
        height: 16px;
      }
    }
  }

  .pass-card-image {
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: 16px;
  }

  .bar-code {
    background-color: white;
    padding: 10px;
    border-radius: 4px;
    display: inline-block;
  }

  &.back {
    background-color: #ffffff;
    min-height: 470px;

    .add-application {
      background-color: #f9f9f9;
      border-radius: 8px;
      padding: 16px;
      button {
        @apply text-brand;
        padding: 6px 8px;
        border-radius: 4px;
        min-width: 64px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
      }
    }

    .switches {
      width: 100%;
      cursor: not-allowed;
      margin-top: 24px;
      padding-left: 16px;
      border-radius: 8px;
      margin-bottom: 24px;
      background-color: #f9f9f9;

      .divider {
        margin: 0px;
        flex-shrink: 0;
        border-width: 0px 0px thin;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.12);
      }
    }

    .remove-pass {
      width: 100%;
      cursor: not-allowed;
      padding: 8px;
      border-radius: 8px;
      margin-bottom: 24px;
      background-color: #f9f9f9;
      text-align: center;
    }

    .pass-detail-fields {
      width: 100%;
      padding: 8px 16px;
      background-color: #f9f9f9;
      .drag-container {
        height: 30px;
      }
    }
  }

  .pass-card-body {
    .card-body-drag {
      height: 42px;
      width: 100%;
    }

    .drag-item {
      // width: 90px;
      display: flex;
      flex-direction: column;
      .label {
        width: 100%;
        margin-bottom: 0px;
        font-weight: 600;
      }
      .skeleton {
        width: 100%;
        height: 16px;
      }
    }
  }

  .drag-container {
    height: 42px;
    border: 1px dashed lightblue;
    display: flex;
    .drag-item {
      cursor: grab;
      font-size: 12px;

      .label {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
        display: inline-block;
      }

      .skeleton {
        width: 100%;
        height: 16px;
        display: inline-block;
        background-color: rgba(51, 51, 51, 0.3);
      }

      &.selected {
        height: 40px;
        border: 1px solid rgb(180, 158, 255);
      }
    }
  }
}
.pass-detail-fields {
  .details-item-container {
    .details-item {
      cursor: grab;
      &.selected {
        border: 1px solid var(--color-brand);
        .skeleton {
          background-color: var(--color-brand);
        }
      }
      .skeleton {
        width: 100%;
        height: 16px;
        display: inline-block;
        background-color: rgba(51, 51, 51, 0.3);
      }
    }
  }
}
</style>
